<!--
 * 标签
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-tag" :class="classes" :style="styles" :hover-class="hoverClass" @tap="handleClick">
        <!-- 图标 -->
        <!-- 兼容京东多slot写法 -->
        <slot name="icon" v-if="$slots.icon"></slot>
        <view class="pure-tag-icon" v-if="icon && !$slots.icon">
            <pure-icon :name="icon" :mode="iconMode"></pure-icon>
        </view>

        <!-- 内容 -->
        <view class="pure-tag-content">
            <!-- 兼容京东多slot写法 -->
            <slot v-if="$slots.default"></slot>
            <text class="pure-tag-text" v-else>{{ text }}</text>
        </view>

        <!-- 关闭按钮 -->
        <!-- 兼容京东多slot写法 -->
        <slot name="close" v-if="$slots.close"></slot>
        <view class="pure-tag-close" v-if="showClose && !$slots.close" @tap.stop="handleClose">
            <pure-icon :name="closeIcon" :mode="closeIconMode"></pure-icon>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["onClick", "close"],
        inject: {
            checkedValue: {
                from: "checkedValue",
                default: undefined,
            },
            update: {
                from: "update",
                default: () => {
                    return () => {};
                },
            },

            globalDisabledClass: {
                from: "globalDisabledClass",
                default: "",
            },

            globalCheckedClass: {
                from: "globalCheckedClass",
                default: "",
            },
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 禁用
                if (this.disabled) classes.push(this.disabledClass || this.globalDisabledClass);

                // 选中状态
                if (this.checked) classes.push(this.globalCheckedClass || "pure-tag-primary");

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 选中状态
            checked() {
                // 选中值为数组类型
                if (Array.isArray(this.checkedValue)) {
                    return this.checkedValue.indexOf(this.text) !== -1;
                }

                // 选中值为非数组类型
                return this.checkedValue === this.text;
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用了
                if (this.disabled) return;

                this.$emit("onClick");
                this.update(this.text);
            },

            // 关闭事件
            handleClose() {
                // 禁用了
                if (this.disabled) return;

                this.$emit("close");
                this.update(this.text);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
